<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keyword" content="">

    <title>登录-阿卡索后台</title>

    <!-- Bootstrap core CSS -->
    <link href="__ADMIN__/static/admin.login/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="__ADMIN__/static/admin.login/css/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href="__ADMIN__/static/admin.login/css/style-responsive.css" rel="stylesheet">
    <link href="__ADMIN__/static/admin.login/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script type="text/javascript" src="__ADMIN__/lib/html5shiv.js"></script>
       <script type="text/javascript" src="__ADMIN__/lib/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
	  <div id="login-page">
	  	<div class="container">

             <form class="form-login" action="javascript:;" id="login-info">
                <h2 class="form-login-heading">登录</h2>
    		        <div class="login-wrap">
                    <!-- {:token()} -->
    		            <input name="username" type="text" id="username" class="form-control" placeholder="Email Or Phone" autofocus>
    		            <br>
    		            <input name="password" type="password" id="password" class="form-control" placeholder="Password">
                    <br>
                    <div class="col-md-12" style="padding:0px;">
                      <samp class="col-md-6" style="padding:0px;">
                           <input name="captcha" id="captcha" type="text" class="form-control " placeholder="验证码">
                      </samp>
                      <samp class="" style="padding:0px;">
                           <a href="#"><img src="{:captcha_src()}" alt="验证码" class="col-md-6" style="padding:0px 5px;" onclick="this.src='{:captcha_src()}?'+Math.random()" id="captcha_img"/></a>
                      </samp>
                    </div>
                    <br>
    		            <label class="checkbox">
    		                <span class="pull-right">
    		                    <a data-toggle="modal" href="javascript:void();">换一张?</a>
    		                </span>
    		            </label>
                    <!-- disabled="disabled" -->
    		            <button id="go-login" class="btn btn-theme btn-block" type="submit" ><i class="fa fa-lock"></i>登录</button>
    		            <hr>
    		            <div class="login-social-link centered">
    		            <p>第三方登录</p>
    		                <button class="btn btn-facebook" type="button"><i class="fa fa-facebook-square"></i> facebook</button>
    		                <button class="btn btn-twitter" type="button"><i class="fa fa-twitter"></i> twitter</button>
    		            </div>
    		        </div>
            </form>
	  	</div>
	  </div>

    <!-- js placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="__ADMIN__/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/layer/2.4/layer.js"></script>

    <!--BACKSTRETCH-->
    <!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
    <script type="text/javascript" src="__ADMIN__/lib/jquery.backstretch.min.js"></script>
    <script>
        $.backstretch("__ADMIN__/static/admin.login/img/login-bg.jpg", {speed: 500});
    </script>

    <!-- layer弹出层 -->
    <script type="text/javascript" src="__ADMIN__/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript" src="__ADMIN__/lib/layer/2.4/layer.js"></script>
    <script type="text/javascript">
      var login_url   = "{:url('admin/Login/login')}";
      var home_url    = "{:url('admin/Home/index')}";
      var captcha_src = "{:captcha_src()}";
    </script>
    <!--<script type="text/javascript" src="__ADMIN__/static/admin.login/js/login.js"></script>-->
     <script type="text/javascript">
      $(function(){
        $("#login-info").validate({
          rules:{
            username:{
      				required:true,
      				minlength:2,
      				maxlength:64
      			},
      			password:{
      				required:true,
      				minlength:6,
      				maxlength:24
      			},
      			captcha:{
              required:true,
      				minlength:3
      			}
          },
          onkeyup:false,
          focusCleanup:true,
          success:"valid",
          submitHandler:function(form){

            layer.load(0, {
              shade: [0.1,'#fff'] //0.1透明度的白色背景
            });

            $.ajax({
               url: "{:url('admin/Login/login')}",
               type: "POST",
               data:$(form).serialize(),
               dataType: "json",
               async : false,
               success: function(result) {
                  console.log(result); //{state: true, msg: "新增成功"}
                  if (result.state == true && result.errorCode == 0 ) {
                    layer.msg(result.msg, {icon: 1});
                    // 关闭弹窗层
                    setTimeout(function(){
                       layer.closeAll('loading');
                       location.href = "{:url('admin/Home/index')}";
                    }, 1000);
                  }else {
                    $("#captcha_img").attr("src", '{:captcha_src()}?'+Math.random());
                    layer.msg(result.msg, {icon: 5});
                  }
               },
               error: function() {
                 layer.msg('网络连接失败', {icon: 5});
               }
             });

            setTimeout(function(){
             layer.closeAll('loading');
           }, 2000);
          }

        });
      })

    </script> 
  </body>
</html>
